import React, { Component, createRef } from 'react';
import { Form, Input, Modal } from 'antd';

class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      confirmLoading: false,
    };
  }

  formRef = createRef();

  handleOk = async (addData, updateData, status) => {
    const res = await this.formRef.validateFields();
    {
      status ? updateData(res) : addData(res);
    }
    this.setState({
      confirmLoading: true,
    });
    setTimeout(() => {
      this.formRef.resetFields();
      this.props.closeModal();
      this.setState({ confirmLoading: false });
    }, 1000);
  };

  handleCancel = () => {
    this.props.closeModal();
  };
  render() {
    const { confirmLoading } = this.state;
    const { addData, updateData, showModal, status } = this.props;
    return (
      <>
        <Modal
          title="添加"
          visible={showModal}
          onOk={() => {
            this.handleOk(addData, updateData, status);
          }}
          confirmLoading={confirmLoading}
          onCancel={this.handleCancel}
          okText="确认"
          cancelText="取消"
          forceRender={true}
        >
          <Form
            ref={(el) => (this.formRef = el)}
            name="basic"
            labelCol={{
              span: 8,
            }}
            wrapperCol={{
              span: 16,
            }}
            initialValues={{
              remember: true,
            }}
            autoComplete="off"
          >
            <Form.Item
              label="name"
              name="name"
              rules={[
                {
                  required: true,
                  message: 'Please input your username!',
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item label="age" name="age">
              <Input />
            </Form.Item>

            <Form.Item label="address" name="address">
              <Input />
            </Form.Item>

            <Form.Item
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            ></Form.Item>
          </Form>
        </Modal>
      </>
    );
  }
}

export default index;
